<template>
    <div>
        <div class="y-blogsLeft col-lg-2 col-md-2 col-sm-2">
            <div>
                <h4 style="text-align:center;margin:20px 0;">树-类别</h4>
            </div>
            <div>
                <Tree class="y-tree" @on-select-change="getSelectTable" :data="baseData"></Tree>
                <!--操控树的按钮-->
                <div class="y-changetree">
                    <Input :class="{'y-treeinput':showclass,'y-treeinputC':hideclass,'animated':hideclass,'zoomIn':hideclass}" v-model="treeValue"  size="small" placeholder="输入树名"></Input>
                    <Button class="y-treebtn" v-on:click="addpar" type="ghost">添加根树</Button>
                    <Button class="y-treebtn" v-on:click="addchi" type="ghost">添加子树</Button>
                    <Button class="y-treebtn" v-on:click="changetree" type="ghost">修改树名</Button>
                    <Button class="y-treebtn" v-on:click="deletetree" type="dashed">删除选树</Button>
                </div>
            </div>
        </div>
        <div class="y_blogsRight col-lg-10 col-md-10 col-sm-10">
                <!-- <h4>我的博客----标签分类</h4> -->
                <blogs-content :query='queryData'></blogs-content>
        </div>
    </div>
</template>

<script>
    import Blogs from '../blogs.vue'

    export default {
        data () {
            return {
                showclass:true,
                hideclass:false,
                parentId:[],
                orshow:false,
                treeValue:'',
                baseData:[],
                queryData:[]
            }
        },
        methods: {
            getSelectTable (tree) {//单击树的类型进行不同的类别的树的选择
                if(tree.length){
                    this.parentId = tree[0];
                    this.getTableDate();
                }else{
                    return;
                }
            },
            getTableDate () {
                this.$http({
                    method:"POST",
                    url:'http://localhost:3000/content/listtoo',
                    data:this.parentId
                })
                .then((response) => {
                    this.queryData = response.data
                })
                .catch((response) => {});

            },
            addpar () {//添加父树
                // this.orshow = true;
                if (!this.orshow) {
                    this.hideclass = true;
                    //利用vue的双向数据绑定思想对样式进行动态的修改
                    this.orshow = true;
                }else {
                    if (this.treeValue === '') {
                        alert('请输入树名')
                    }else {
                        this.$http({
                            method:"POST",
                            url:'http://localhost:3000/cate2/data',
                            data:{
                                title:this.treeValue,
                                label:this.treeValue,
                                value:this.treeValue,
                            }
                        })
                        .then((response) => {
                            this.geteDate ();
                            this.clertVlue ();
                            console.log(response)
                        })
                        .catch((response) => {
                            console.log(response)
                        });

                    }
                    
                }

            },
            addchi () {
                if(!this.orshow) {
                    this.hideclass = true;
                    this.orshow = true;
                }else {
                     if (this.treeValue === '' || this.parentId == '') {
                        alert('操作失误')
                    }else {
                        this.$http({
                            method:"POST",
                            url:'http://localhost:3000/cate2/data/',
                            data:{
                                title:this.treeValue,
                                parentId:this.parentId
                            }
                        })
                        .then((response) => {
                            this.geteDate ();
                            this.clertVlue ();

                        })
                        .catch((response) => {
                            console.log(response)
                        });
                    }
                }
            },
            deletetree () {//删除树的样式
                this.orshow = false;
                     this.hideclass = false;
                if (this.parentId == '') {
                    alert('请选择要删除的树');
                } else {
                    this.$http({
                        method:"DELETE",
                        url:'http://localhost:3000/cate2/data/'+this.parentId,
                    })
                    .then((response) => {
                        this.geteDate ();
                        this.parentId = '';
                    })
                    .catch((response) => {
                        console.log(response)
                    });
                }
            },
            changetree () {
                if(!this.orshow) {
                    this.hideclass = true;
                    this.orshow = true;
                }else {
                     if (this.treeValue === '' || this.parentId == '') {
                        alert('未点击树或不能为空的树名')
                    }else {
                        this.$http({
                            method:"POST",
                            url:'http://localhost:3000/cate2/data/'+this.parentId,
                            data:{
                                title:this.treeValue,
                            }
                        })
                        .then((response) => {
                            this.geteDate ();
                            this.clertVlue ();

                        })
                        .catch((response) => {
                            console.log(response)
                        });
                    }
                }
            },
            geteDate () {
                this.$http({
                method:"GET",
                url:'http://localhost:3000/cate2/list',
                })
                .then((response) => {
                    // response.date.
                    this.baseData = response.data;
                })
                .catch((response) => {
                    console.log(response)
                });
            },
            clertVlue () {
                this.treeValue = '';
                this.parentId = ''; 
            }
        },
        created: function () {
            this.geteDate ();
        },
        components: {
            'blogs-content': Blogs
        }
    }
</script>

<style lang="scss" scoped>
    .y-tree {
        font-size: 28px;
    }
    .y-changetree{
        margin-top: 16px;
        .y-treeinput{
            margin:8px 0;
            display: none;
        }
        .y-treeinputC{
            display: block;
        }
        .y-treebtn{
            margin:4px 0
        }
    }
</style>
